<template>
    <q-virtual-scroll
            ref="virtualListRef"
            :items="chatHouseList.users"
            component="q-list"
            class="scrollViewC"
            style=" overflow-x: hidden;"
    >
        <template v-slot="{ item, index }">
            <q-item
                    v-if=" item.nick.indexOf(searchKey)>-1 || !searchKey"
                    :key="index"
                    v-ripple
                    clickable
                    @click="toChat(item)"
            >
                <q-item-section avatar>
                    <q-avatar>
                        <img :src="item.avatar">
                    </q-avatar>
                </q-item-section>
                <q-item-section class="text-left">
                    <q-item-label lines="1"> {{ item.nick }}</q-item-label>
                    <q-item-label caption lines="1">
                        J-IM轻量级高性能即时通讯中间件
                    </q-item-label>
                </q-item-section>
                <q-item-section v-if="item.userId === loginUser.userId" side top>
                    <q-badge color="green"> 你在这里</q-badge>
                </q-item-section>
                <q-item-section v-if="item.newCount" side top>
                    <q-badge color="green"> {{ item.newCount }}</q-badge>
                </q-item-section>
            </q-item>
            <q-separator />
        </template>
    </q-virtual-scroll>
</template>

<script>
  import {mapGetters} from "vuex";
  export default {
    name: "ChatHouse",
    props:{
      searchKey:String
    },
    methods:{
      // eslint-disable-next-line no-unused-vars
      toChat(e) {
        this.$emit('toChat',e)
      },
    },
    computed: {
      ...mapGetters({
        chatHouseList: 'onGetChatHouseUserList',
        loginUser: 'onGetLoginInfo'
      }),
    }
  }
</script>

<style scoped>

</style>
